<template>
  <div class="recharge-modal" v-if="isOpen" @click="closeModal">
    <div class="recharge-content" @click.stop>
      <!-- 弹窗头部 -->
      <div class="recharge-header">
        <h3>虚拟货币充值</h3>
        <button class="close-btn" @click="closeModal" aria-label="关闭充值弹窗">×</button>
      </div>
      
      <!-- 弹窗主体 -->
      <div class="recharge-body">
        <!-- 当前余额展示 -->
        <div class="balance-info">
          <p>当前余额: <span class="balance">¥{{ userBalance.toFixed(2) }}</span></p>
        </div>
        
        <!-- 充值金额选择 -->
        <div class="amount-selection">
          <h4>选择充值金额</h4>
          <!-- 预设金额按钮组 -->
          <div class="amount-buttons">
            <button 
              v-for="amount in presetAmounts" 
              :key="amount"
              :class="{ active: selectedAmount === amount }"
              @click="selectAmount(amount)"
              :aria-selected="selectedAmount === amount"
            >
              ¥{{ amount }}
            </button>
          </div>
          
          <!-- 自定义金额输入 -->
          <div class="custom-amount">
            <label for="customAmount">自定义金额:</label>
            <input 
              type="number" 
              id="customAmount"
              v-model.number="customAmount"
              placeholder="最低1元"
              min="1"
              step="1"
              @input="handleCustomInput"
              @blur="validateCustomAmount"
            />
            <!-- 自定义金额错误提示 -->
            <p v-if="customAmountError" class="error-tip">{{ customAmountError }}</p>
          </div>
        </div>
        
        <!-- 已选充值金额 -->
        <div class="selected-amount">
          <p>充值金额: <span class="amount">¥{{ rechargeAmount.toFixed(2) }}</span></p>
        </div>
        
        <!-- 支付方式选择 -->
        <div class="payment-methods">
          <h4>选择支付方式</h4>
          <div class="payment-options">
            <label 
              v-for="method in paymentMethods" 
              :key="method.id"
              class="payment-option"
            >
              <input 
                type="radio" 
                :name="paymentMethodName"
                :value="method.id" 
                v-model="selectedPaymentMethod"
                :aria-label="`选择${method.name}支付`"
              />
              {{ method.name }}
              <span class="payment-icon">{{ method.icon }}</span>
            </label>
          </div>
        </div>
      </div>
      
      <!-- 弹窗底部：确认充值按钮 -->
      <div class="recharge-footer">
        <button 
          @click="confirmRecharge" 
          class="confirm-btn"
          :disabled="!isRechargeValid"
          :aria-disabled="!isRechargeValid"
        >
          确认充值 ¥{{ rechargeAmount.toFixed(2) }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
// 导入必要依赖（仅保留使用到的）
import { ref, computed } from 'vue'
import { useCartStore } from '../stores/cart'

// 1. 定义Props（明确类型约束，确保父组件传参正确）
const props = defineProps({
  isOpen: {
    type: Boolean,
    required: true,  // 标记为必传属性
    default: false,  // 兜底默认值，避免未传参时报错
    validator: (value) => typeof value === 'boolean'  // 额外校验类型
  }
})

// 2. 定义Emits（明确事件名称和参数，便于父组件接收）
const emit = defineEmits(['close', 'recharged'])

// 3. 初始化Store（获取用户余额、充值方法）
const cartStore = useCartStore()

// 4. 响应式变量定义
const presetAmounts = [10, 50, 100, 200, 500]  // 预设充值金额
const selectedAmount = ref(null)  // 选中的预设金额（null表示未选）
const customAmount = ref(0)  // 自定义充值金额（初始化为0，避免NaN）
const customAmountError = ref('')  // 自定义金额输入错误提示
const selectedPaymentMethod = ref('alipay')  // 默认选中支付宝
const paymentMethodName = ref('paymentMethod')  // 单选框name属性，确保互斥

// 5. 支付方式列表（统一管理）
const paymentMethods = [
  { id: 'alipay', name: '支付宝', icon: '💰' },
  { id: 'wechat', name: '微信支付', icon: '💳' },
  { id: 'bank', name: '银行卡', icon: '🏦' }
]

// 6. 计算属性（处理依赖逻辑，避免重复代码）
// 6.1 当前用户余额（保留2位小数，避免浮点误差）
const userBalance = computed(() => {
  return Number(cartStore.userBalance) || 0  // 兜底为0，防止Store未初始化
})

// 6.2 最终充值金额（优先取预设金额，其次取自定义金额）
const rechargeAmount = computed(() => {
  if (selectedAmount.value !== null) {
    return selectedAmount.value
  }
  // 自定义金额需处理空值/非数字情况，兜底为0
  return Number(customAmount.value) || 0
})

// 6.3 充值合法性校验（金额>0且无输入错误）
const isRechargeValid = computed(() => {
  return rechargeAmount.value > 0 && !customAmountError.value
})

// 7. 事件处理函数
// 7.1 选择预设金额
const selectAmount = (amount) => {
  selectedAmount.value = amount  // 选中预设金额
  customAmount.value = 0  // 清空自定义金额
  customAmountError.value = ''  // 清空错误提示
}

// 7.2 处理自定义金额输入
const handleCustomInput = () => {
  if (customAmount.value) {
    selectedAmount.value = null  // 输入自定义金额时，取消预设金额选中
    customAmountError.value = ''  // 输入时清空错误提示
  }
}

// 7.3 校验自定义金额（失焦时触发，避免实时报错影响体验）
const validateCustomAmount = () => {
  const amount = Number(customAmount.value)
  if (customAmount.value && amount < 1) {
    customAmountError.value = '自定义金额最低1元'
  } else if (customAmount.value && isNaN(amount)) {
    customAmountError.value = '请输入合法数字'
  } else {
    customAmountError.value = ''  // 校验通过，清空错误
  }
}

// 7.4 确认充值
const confirmRecharge = () => {
  // 二次校验（防止极端情况）
  if (!isRechargeValid.value) return

  try {
    // 调用Store的充值方法
    cartStore.recharge(rechargeAmount.value)
    // 提示充值成功（可替换为更友好的弹窗组件）
    alert(`充值成功！已到账 ¥${rechargeAmount.value.toFixed(2)}`)
    // 通知父组件：充值完成（传递充值金额）
    emit('recharged', rechargeAmount.value)
    // 关闭弹窗并重置表单
    closeModal()
    resetForm()
  } catch (error) {
    // 捕获充值失败错误，提示用户
    alert(`充值失败：${error.message || '请稍后再试'}`)
  }
}

// 7.5 重置表单（清空选择和输入）
const resetForm = () => {
  selectedAmount.value = null
  customAmount.value = 0
  customAmountError.value = ''
  selectedPaymentMethod.value = 'alipay'
}

// 7.6 关闭弹窗
const closeModal = () => {
  emit('close')  // 通知父组件关闭弹窗
  resetForm()    // 关闭时重置表单，避免下次打开残留数据
}
</script>

<style scoped>
/* 弹窗遮罩层 */
.recharge-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(2px);  /* 背景模糊，提升视觉层次 */
}

/* 弹窗内容区 */
.recharge-content {
  background: white;
  width: 500px;
  max-width: 90%;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);  /* 增加阴影，避免扁平感 */
  animation: scaleIn 0.3s ease-out;
  overflow: hidden;  /* 确保圆角生效 */
}

/* 弹窗入场动画 */
@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* 弹窗头部 */
.recharge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;  /* 头部背景色，区分内容区 */
}

.recharge-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  transition: color 0.2s ease;
  padding: 4px;
  border-radius: 50%;  /* 圆形点击区域，提升交互体验 */
}

.close-btn:hover {
  color: #e74c3c;  /* hover时变红，明确反馈 */
  background: #f5f5f5;
}

/* 弹窗主体 */
.recharge-body {
  padding: 20px;
}

/* 余额信息 */
.balance-info {
  text-align: center;
  margin-bottom: 24px;
  font-size: 16px;
  color: #666;
}

.balance {
  font-size: 26px;
  font-weight: bold;
  color: #27ae60;
  margin: 0 4px;
}

/* 金额选择区域 */
.amount-selection h4, .payment-methods h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

/* 预设金额按钮组 */
.amount-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.amount-buttons button {
  padding: 14px 8px;
  border: 2px solid #e0e0e0;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  color: #333;
  transition: all 0.2s ease;
}

.amount-buttons button.active {
  border-color: #3498db;
  background: #ebf5ff;  /* 选中时淡蓝色背景，而非纯蓝色 */
  color: #3498db;
  font-weight: 500;
}

.amount-buttons button:hover:not(.active) {
  border-color: #3498db;
  color: #3498db;
}

/* 自定义金额输入区 */
.custom-amount {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.custom-amount label {
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.custom-amount input {
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 16px;
  color: #333;
  transition: border-color 0.2s ease;
}

.custom-amount input:focus {
  outline: none;
  border-color: #3498db;  /* 聚焦时蓝色边框 */
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);  /* 轻微外发光 */
}

/* 错误提示 */
.error-tip {
  margin: 0;
  font-size: 12px;
  color: #e74c3c;
  height: 16px;  /* 固定高度，避免布局跳动 */
}

/* 已选金额展示 */
.selected-amount {
  text-align: center;
  margin: 24px 0;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 6px;
  font-size: 16px;
  color: #333;
}

.selected-amount .amount {
  font-size: 22px;
  font-weight: bold;
  color: #e74c3c;
  margin: 0 4px;
}

/* 支付方式选择 */
.payment-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.payment-option {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #333;
}

.payment-option:hover {
  border-color: #3498db;
  background: #f9f9f9;
}

/* 单选框样式优化 */
.payment-option input[type="radio"] {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  accent-color: #3498db;  /* 单选框选中颜色 */
}

.payment-icon {
  margin-left: auto;
  font-size: 20px;
}

/* 弹窗底部 */
.recharge-footer {
  padding: 18px 20px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}

/* 确认充值按钮 */
.confirm-btn {
  width: 100%;
  padding: 14px;
  background: #27ae60;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.confirm-btn:hover:not(:disabled) {
  background: #219653;  /*  hover时加深绿色 */
}

.confirm-btn:disabled {
  background: #bdc3c7;
  color: #ecf0f1;
  cursor: not-allowed;
}

/* 适配小屏幕（手机） */
@media (max-width: 480px) {
  .amount-buttons {
    grid-template-columns: repeat(2, 1fr);  /* 小屏幕2列布局 */
  }
  
  .balance {
    font-size: 22px;
  }
  
  .selected-amount .amount {
    font-size: 20px;
  }
}
</style>